<template>
  <!-- 推荐 -->
  <div class="recommend-container">
    <refresh-list :status="status" @on-load="onLoad" @on-refresh="onRefresh">
      <template #content>
        <!-- 轮播图 -->
        <div class="banner-container">
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in activityBannerList" :key="index" @click="jump_detail(image.jump_url)">
              <img :src="image.cover_url" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- 活动列表 -->
        <activity-item v-for="activity in activityMainData" :key="activity.id" :title="activity.title" :item-list="activity.activities" :id="activity.id"></activity-item>
      </template>
      <template #list>
        <!-- 更多活动列表 -->
        <feeds-activity :feeds-list="activityFeedsList"></feeds-activity>
      </template>
    </refresh-list>
  </div>
</template>

<script>
import axios from '@/utils/request'
import ActivityItem from './ActivityItem.vue'
import FeedsActivity from './FeedsActivity.vue'
import RefreshList from '../public-component/RefreshList.vue'
export default {
  components: {
    ActivityItem,
    FeedsActivity,
    RefreshList
  },
  data() {
    return {
      status: {
        isLoading: false,
        finished: false,
        loading: false
      },
      canLoad: false, // 能不能进行加载
      page: 1, // 控制feeds数据请求翻页
      activityFeedsList: [], // 更多活动数据列表
      activityBannerList: [], // 活动页面轮播图数据
      activityMainData: [] // 活动页面的主要数据
    }
  },
  methods: {
    // 请求轮播图地址
    async requestActivityBannerList() {
      /*
        请求地址:https://api.xmonster.cn/v2/banners
        请求方式:get
        参数:
        params:{
          type: 10
        }
      */
      const data = await axios.get('/v2/banners', {
        params: {
          type: 10
        }
      })
      this.activityBannerList = data
    },
    // 请求活动页面的轮播图下面的数据
    async requestActivityMainData() {
      /*
        请求地址：https://api.xmonster.cn/v2/main
        请求方式：get
        请求参数：
          params:{
            city: '上海'
          }
      */
      const data = await axios.get('/v2/main', {
        params: {
          city: '上海'
        }
      })
      this.activityMainData = data
    },
    // 请求更多活动数据列表
    async requestActivityFeedsList() {
      /*
        请求地址：https://api.xmonster.cn/v2/main/feeds
        请求方式：get
        请求参数：
        params：{
          page: 1
          参数每次增加1实现数据的加载
        }  
      */
      const data = await axios.get('/v2/main/feeds', {
        params: {
          page: this.page
        }
      })
      if (data.length > 0) {
        this.page++
        this.activityFeedsList = [...this.activityFeedsList, ...data]
      } else {
        this.status.finished = true
      }
    },
    // 下拉刷新
    async onRefresh() {
      this.page = 1
      this.activityFeedsList = []
      this.activityBannerList = []
      this.activityMainData = []
      await this.sendRequest()
      this.status.isLoading = false
    },
    // 滚动加载更多
    async onLoad() {
      await this.requestActivityFeedsList()
      this.status.loading = false
    },
    // 发起请求
    async sendRequest() {
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      try {
        this.requestActivityBannerList()
        this.requestActivityMainData()
        await this.requestActivityFeedsList()
      } catch {
        Toast.clear()
        this.$toast.fail('请检查网络！')
      } finally {
        Toast.clear()
      }
    },
    // 跳转到轮播图详情页
    jump_detail(val) {
      const re = /[\/|?](id=)?(\d+)[?|&]/gi
      re.test(val)
      const id = RegExp.$2
      this.$router.push('/bannerdetail/' + id)
    }
  },
  created() {
    this.sendRequest()
  }
}
</script>

<style lang="less" scoped>
.recommend-container {
  padding-top: 5px;
  padding-bottom: 50px;
  // 轮播图
  .banner-container {
    height: 200px;
    background-color: #eee;

    img {
      width: 100%;
      height: 200px;
    }
    ::v-deep .van-swipe__indicator {
      background-color: #fff;
    }
  }
}
</style>
